<template>
  <div class="component">
    <app-header title="" :needBack="true">
      <template slot="right-btn">
        <div class="more-btn" @click="doMore">
          <i class="iconfont icon-more"></i>
        </div>
      </template>
    </app-header>
    <article class="article">
      <h3 class="title">{{title}}</h3>
      <p class="time">发布时间：{{time | parseTime}}</p>
      <p class="source">来源：{{source}}</p>
      <p class="context">正文：{{context}}</p>
      <p class="link">原文链接：{{link}}</p>
      <div v-if="hasRemark">
        <div class="remark">
          备注：{{remark}}
        </div>
      </div>
      <div v-else>
        <div class="remark">
          备注：
          <x-textarea v-model="remark" placeholder="填写备注信息" :show-counter="true" :max="200"></x-textarea>
        </div>
        <div class="btn-row">
          <span class="btn" @click="reset">取消</span><span class="btn sub-btn" @click="submit">确认</span>
        </div>
      </div>
    </article>
  </div>
</template>
<script>
import AppHeader from '@/components/common/AppHeader'
import { XTextarea, Group } from 'vux'
export default {
  name: "",
  data() {
    let data = {
      title: '文章标题',
      time: 1531310597748,
      source: '核心网',
      context: '7 月 10 日，与电子元件供应链关系密切的台媒 DigiTimes 报道称，苹果新一代 6.1 英寸 LCD 版 iPhone 屏幕的 LED 背光模组将由日亚化学工业（Nichia,简称为日亚或日亚化）供应。关键是，苹果作为大客户提出了定制需求，所订购的是 0.3t LED 规格的模组，而这一规格是主流 0.4t 规格进化版，符合苹果对超窄边框设计的挑战。据称，在采用主流 0.4t 规格的 LED 背光模组的情况下，智能手机屏幕底部边框的宽度为 4.0mm - 4.5mm。而苹果在日亚化定制的全新 0.3t 规格的 LED 模组，可将底部屏幕边框缩减至 2.0mm - 2.5mm，最差的情况下也能缩减至 3mm。考虑到目前 iPhone X 下巴宽度亮屏时在 3mm 左右，因此采用 0.3t 规格的新一代 LCD 款 iPhone 设计也几乎可以匹敌 OLED 机型。7 月试产 8 月量产报道显示，其实在交付给苹果之前，日亚化 03t 规格的 LED 模组从 2018 年上半年就开始小量生产，并测试市场反应，“曾应用于大陆及日本手机品牌特殊机型”，结果“0.3t LED 模组一度在大陆掀起缺货热潮”，主要是因为 0.3t LED 模组的“准确度及稳定性”问题导致产能不足，要等到下半年 0.3t 的新品量产才渐趋稳定。不过，苹果已经将日亚化下半年的 0.3t 新品产能几乎全部包下，6.1 英寸 iPhone 量产预计 7 月进入试产，8 月开始小量生产，之后两个月将逐步扩大出货量，10 月进入全年出货高峰期。',
      remark: '',
      link: 'https://www.baidu.com',
      hasRemark: false,
    }
    return data
  },
  methods: {
    reset() {
      this.remark = ''
    },
    submit() {

    },
    doMore() {

    },
  },
  components: {
    AppHeader,
    XTextarea,
    Group,
  },
}
</script>
<style lang="less" scoped>
  @import '../../assets/less/default.less';
  .article {
    width: 90%;
    margin: auto;
    font-size: .3rem;
    color: #000;
    .title {
      text-align: center;
      margin-bottom: .3rem;
    }
    .time, .source, .link {
      font-size: .25rem;
      margin-bottom: .1rem;
    }
    .context {
      font-size: .28rem;
      margin-bottom: .4rem;
    }
    .remark {
      font-size: .25rem;
      margin-bottom: .3rem;
      border: 1px solid @border;
      padding: .2rem;
    }
    .btn-row {
      font-size: .25rem;
      margin-bottom: .2rem;
      text-align: right;
      .btn {
        background-color: @grey;
        color: @white;
        padding: .12rem .35rem;
        margin-right: .2rem;
        border-radius: 5px;
        &:last-child {
          margin-right: 0;
        }
        &.sub-btn {
          background: @blue;
        }
      }
    }
  }
</style>
